<template>
    <div class="TwoWayValidation">
        <div class="TwoWayValidation_top">
            <div class="TwoWayValidation_div"></div>
            <h4 class="TwoWayValidation_title">双向绑定校验</h4>
        </div>
        <el-card>
            <div id="charts">

            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "TwoWayValidation",
        data(){
            return {
                FirValidation : {
                    dataFir : [],
                    dataSec : [],
                    dataDifference : []
                },
                SecValidation : {
                    dataFir : [],
                    dataSec : [],
                    dataDifference : []
                },
                TirValidation : {
                    dataFir : [],
                    dataSec : [],
                    dataDifference : []
                },
                FourValidation : {
                    dataFir : [],
                    dataSec : [],
                    dataDifference : []
                },
                data : [
                    [1, 4862.4],
                    [2, 5294.7],
                    [3, 5934.5],
                    [4, 7171.0],
                    [5, 8964.4],
                    [6, 10202.2],
                    [7, 11962.5],
                    [8, 14928.3],
                    [9, 16909.2],
                    [10, 18547.9],
                    [11, 21617.8],
                    [12, 26638.1],
                    [13, 34634.4],
                    [14, 46759.4],
                    [15, 58478.1],
                    [16, 67884.6],
                    [17, 74462.6],
                    [18, 79395.7]
                ] ,
                data1 : [
                    [1, 20000.4],
                    [2, 54000.7],
                    [3, 64605.5],
                    [4, 23404.0],
                    [5, 80766.4],
                    [6, 89000.2],
                    [7, 67089.5],
                    [8, 14345.3],
                    [9, 16843.2],
                    [10, 18987.9],
                    [11, 31617.8],
                    [12, 47676.1],
                    [13, 55456.4],
                    [14, 57656.4],
                    [15, 79876.1],
                    [16, 66567.6],
                    [17, 85456.6],
                    [18, 90987.7]
                ] ,
                data2 : [
                    [1, 5000.4],
                    [2, 8000.7],
                    [3, 6000.5],
                    [4, 7000.0],
                    [5, 8023.4],
                    [6, 9898.2],
                    [7, 6473.5],
                    [8, 4000.3],
                    [9, 9800.2],
                    [10, 3209.9],
                    [11, 3232.8],
                    [12, 4354.1],
                    [13, 4323.4],
                    [14, 7688.4],
                    [15, 6786.1],
                    [16, 6564.6],
                    [17, 7654.6],
                    [18, 9056.7]
                ] ,
            }
        },
        methods : {
            TwoWayFirst(){
                 this.$http(`post`,`/identity/kPIStatistics/list`,false).then(data=>{
                     let getData = data.concat();
                     getData.forEach((item,index) =>{
                         let temporaryFirFirList = [];
                         let temporaryFirSecList = [];
                         let temporaryFirTirList = [];
                         let temporarySecFirList = [];
                         let temporarySecSecList = [];
                         let temporarySecTirList = [];
                         let temporaryTirFirList = [];
                         let temporaryTirSecList = [];
                         let temporaryTirTirList = [];

                         temporaryFirFirList.push(index);
                         temporaryFirFirList.push(item.villagePerformance);
                         this.FirValidation.dataFir.push(temporaryFirFirList);
                         temporaryFirSecList.push(index);
                         temporaryFirSecList.push(item.monitoringIndex);
                         this.FirValidation.dataSec.push(temporaryFirSecList);
                         temporaryFirTirList.push(index);
                         temporaryFirTirList.push(item.margin1);
                         this.FirValidation.dataDifference.push(temporaryFirTirList);

                         temporarySecFirList.push(index);
                         temporarySecFirList.push(item.dvm);
                         this.SecValidation.dataFir.push(temporarySecFirList);
                         temporarySecSecList.push(index);
                         temporarySecSecList.push(item.abilityJudgement);
                         this.SecValidation.dataSec.push(temporarySecSecList);
                         temporarySecTirList.push(index);
                         temporarySecTirList.push(item.margin2)
                         this.SecValidation.dataDifference.push(temporarySecTirList);

                         temporaryTirFirList.push(index);
                         temporaryTirFirList.push(item.routine);
                         this.TirValidation.dataFir.push(temporaryTirFirList);
                         temporaryTirSecList.push(index);
                         temporaryTirSecList.push(item.comprehensiveEvaluation);
                         this.TirValidation.dataSec.push(temporaryTirSecList);
                         temporaryTirTirList.push(index);
                         temporaryTirTirList.push(item.margin3)
                         this.TirValidation.dataDifference.push(temporaryTirTirList);


                      })
                     console.log(this.FirValidation.dataFir)
                     let myChart = echarts.init(document.getElementById('charts'));
                     let option={
                         tooltip: {
                             trigger: 'axis',
                             axisPointer: {
                                 type: 'cross'
                             }
                         },
                         dataZoom: [
                             {   // 这个dataZoom组件，默认控制x轴。
                                 type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                                 start: 10,      // 左边在 10% 的位置。
                                 end: 70         // 右边在 60% 的位置。
                             },
                             {   // 这个dataZoom组件，也控制x轴。
                                 type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                                 start: 10,      // 左边在 10% 的位置。
                                 end: 70         // 右边在 60% 的位置。
                             }
                         ],
                         xAxis: {
                             type: 'value',
                             splitLine: {
                                 lineStyle: {
                                     type: 'dashed'
                                 }
                             },
                             splitNumber: 20
                         },
                         yAxis: [
                             {
                             type: 'value',
                             name:'村级实绩排名',
                             splitLine: {
                                 lineStyle: {
                                     type: 'dashed'
                                 }
                             },
                                 min:0,
                                 max:100,
                         },
                             {
                                 type: 'value',
                                 name : '监测指标排名',
                                 position:'left',
                                 offset:75,
                                 splitLine: {
                                     lineStyle: {
                                         type: 'dashed'
                                     }
                                 },
                                 axisTick:{
                                     inside:'false',
                                     length:10,
                                 },
                                 min:0,
                                 max:100,


                             },
                             {
                                 type: 'value',
                                 name : '差值',
                                 splitLine: {
                                     lineStyle: {
                                         type: 'dashed'
                                     },
                                 },
                                 axisTick:{
                                     inside:'false',
                                     length:10,
                                 },
                                 min:0,
                                 max:800,

                             },

                         ],
                         series: [{
                             name: 'scatter',
                             type: 'scatter',
                             emphasis: {
                                 label: {
                                     show: true,
                                     position: 'left',
                                     color: 'yellow',
                                     fontSize: 16
                                 }
                             },
                             itemStyle:{
                                 normal: {
                                     color: 'yellow',
                                 }
                             },
                             data:this.FirValidation.dataFir
                         },
                             {
                                 name: 'scatter',
                                 type: 'scatter',
                                 emphasis: {
                                     label: {
                                         show: true,
                                         position: 'left',
                                         color: 'black',
                                         fontSize: 16
                                     }
                                 },
                                 itemStyle:{
                                     normal: {
                                         color: 'black',
                                     }
                                 },
                                 data:this.FirValidation.dataSec
                             },
                             {
                                 name: 'bar',
                                 type: 'bar',
                                 emphasis: {
                                     label: {
                                         show: true,
                                         position: 'left',
                                         color: 'blue',
                                         fontSize: 16
                                     }
                                 },
                                 yAxisIndex:2,
                                 itemStyle:{
                                     normal: {
                                         color: '#bfa064',
                                         option:0.3
                                     }
                                 },
                                 data:this.FirValidation.dataDifference
                             },
                         ]
                     }
                     myChart.setOption(option);
                });
            }
        },
        mounted() {
            this.TwoWayFirst();
        }
    }
</script>

<style scoped>
    .TwoWayValidation_top{
        height:35px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(72, 231, 108, 0.2);
        box-shadow:0px 2px 5px 0px rgba(74,155,84,0.2);
        border-radius:5px 5px 0px 0px;
    }
    .TwoWayValidation_div{
        width:7px;
        height:35px;
        background:rgba(83,164,124,1);
        border-radius:4px 0px 0px 0px;
        float: left;
    }
    .TwoWayValidation_title{
        float: left;
        color: #4DAEAC;
        line-height: 34px;
        height: 34px;
        text-indent: 1em;
    }
    #charts {
        width: 1200px;
        height:400px;
        border: 1px solid red;
    }
</style>
